<template>
  <!-- --------- -->
  <!-- xif -->
  <!-- --------- -->
  <text v-if="!xif" />


  <!-- --------- -->
  <!-- container -->
  <!-- --------- -->
  <!-- view  -->
  <view
    v-else-if="xcode==='View'"
    :class="[getXMeta('xclass', '')]"
    :style="[getXMeta('xstyle', '')]"
  >
    <xone-x
      v-for="(v ,i) in getXChildrenMetas()"
      :key="i"
      :xid="xid"
      :xmetapath="getXChildMetaPath(i)"
      :xdatapath="getXMeta('xdatapath', {defaultValue: xdatapath, xbase: v})"
    />
  </view>

  <!-- Card  -->
  <view
    v-else-if="xcode==='Card'"
    class="x-card"
    :class="[getXMeta('xclass', '')]"
    :style="[getXMeta('xstyle', '')]"
  >
    <xone-x
      v-for="(v ,i) in getXChildrenMetas()"
      :key="i"
      :xid="xid"
      :xmetapath="getXChildMetaPath(i)"
      :xdatapath="getXMeta('xdatapath', {defaultValue: xdatapath, xbase: v})"
    />
  </view>

  <!-- Layout -->
  <view 
    v-else-if="xcode==='layout'"
    :class="[getXMeta('xclass', '')]"
    :style="[getXMeta('xstyle', '')]"
  >
    <view 
      v-for="(v,i) in layoutGetList()" 
      :key="i"
      class="u-row" 
      :style="[layoutRowGetStyle(v)]"
    >
      <view 
        v-for="(vv,ii) in v"
        :key="ii"
        class="u-col"
        :class="[layoutColGetClass(vv)]"
        :style="[layoutColGetStyle(vv)]"
        :span="vv.span"
      >
        <xone-x
          :xid="xid"
          :xmetapath="getXChildMetaPath(vv._index)"
          :xdatapath="getXMeta('xdatapath', {defaultValue: xdatapath, xbase: vv})"
        />
      </view>
    </view>
  </view>
  <view 
    v-else-if="xcode==='row'"
    class="u-row" 
    :style="[rowGetStyle()]"
  >
    <xone-x
      v-for="(v ,i) in getXChildrenMetas()"
      :key="i"
      :xid="xid"
      :xmetapath="getXChildMetaPath(i)"
      :xdatapath="getXMeta('xdatapath', {defaultValue: xdatapath, xbase: v})"
    />
  </view>
  <view 
    v-else-if="xcode==='col'"
    class="u-col"
    :class="[colGetClass()]"
    :style="[colGetStyle()]"
  >
    <xone-x
      v-for="(v ,i) in getXChildrenMetas()"
      :key="i"
      :xid="xid"
      :xmetapath="getXChildMetaPath(i)"
      :xdatapath="getXMeta('xdatapath', {defaultValue: xdatapath, xbase: v})"
    />
  </view>

  <!-- --------- -->
  <!-- Widget -->
  <!-- --------- -->

  <!-- Tag  -->
  <view
    v-else-if="xcode==='Tag'"
    :class="[getXMeta('xclass', '')]"
    :style="[getXMeta('xstyle', '')]"
  >
    tag: {{ getXMeta('xtitle') }}
  </view>

  <!-- Icon  -->
  <view
    v-else-if="xcode==='Icon'"
    class="u-icon"
    :class="[getXMeta('xclass', ''), 'u-icon--' + getXMeta('labelPos', {isCache: true})]"
    :style="[getXMeta('xstyle', '')]"
  >
    <image
      v-if="getXMeta('isImg')"
      class="u-icon__img"
      :src="getXMeta('name', {isCache: true})"
      :mode="getXMeta('imgMode')"
      :style="[getXMeta('imgStyle')]"
    />
    <text
      v-else
      class="u-icon__icon"
      :class="[iconGetIconClass()]"
      :style="[getXMeta('iconStyle')]"
      :hover-class="getXMeta('hoverClass')"
      @touchstart="touchstart"
    />
    <text
      v-if="getXMeta('label', {isCache: true})"
      class="u-icon__label"
      :style="{
        color: getXMeta('labelSize', {labelColor: 'inherit'}),
        fontSize: getXMeta('labelSize', {defaultValue: 'inherit'}),
        marginLeft: getXMeta('labelPos', {isCache: true}) == 'right' ? getXMeta('marginLeft') : 0,
        marginTop: getXMeta('labelPos', {isCache: true}) == 'bottom' ? getXMeta('marginTop') : 0,
        marginRight: getXMeta('labelPos', {isCache: true}) == 'left' ? getXMeta('marginRight') : 0,
        marginBottom: getXMeta('labelPos', {isCache: true}) == 'top' ? getXMeta('marginBottom') : 0,
      }"
    >
      {{ getXMeta('label', {isCache: true}) }}
    </text>
  </view>

  <!-- button -->
  <button
    v-else-if="xcode==='Button'"
    id="u-wave-btn"
    class="u-btn u-line-1 u-fix-ios-appearance u-btn--bold-border"
    :class="[
      'u-size-' + getXMeta('size', {defaultValue: 'default'}),
      getXMeta('plain') ? 'u-btn--' + getXMeta('type', {defaultValue: 'default'}) + '--plain' : '',
      getXMeta('loading') ? 'u-loading' : '',
      getXMeta('shape') == 'circle' ? 'u-round-circle' : '',
      'u-btn--' + getXMeta('type', {defaultValue: 'default'}),
      getXMeta('disabled') ? `u-btn--${getXMeta('type', {defaultValue: 'default'})}--disabled` : '',
      getXMeta('xclass')
    ]"
    :disabled="getXMeta('disabled')"
    :form-type="getXMeta('formType')"
    :open-type="getXMeta('openType')"
    :style="[getXMeta('xstyle')]"
    :hover-class="getXMeta('hoverClass')"
    :loading="getXMeta('loading')"
    @click="xonClick('')"
  >
    {{ getXMeta('xtitle') }}
  </button>

  
  
  <!-- --------- -->
  <!-- Data -->
  <!-- --------- -->

  <!-- DataList -->
  <view
    v-else-if="xcode==='DataList'&&xtype==='component'"
    :class="[getXMeta('xclass', '')]"
    :style="[getXMeta('xstyle', '')]"
  >
    <xone-x
      v-for="(v,i) in dataListGetList()"
      :key="i"
      :xid="xid"
      :xmetapath="`${xmetapath}.xcomponent`"
      :xdatapath="`${xdatapath}.list.${i}`"
    />
  </view>
  <view
    v-else-if="xcode==='DataList'&&xtype==='cardFields'"
    :class="[getXMeta('xclass', '')]"
    :style="[getXMeta('xstyle', '')]"
  >
    <view
      v-for="(v,i) in dataListGetList()"
      :key="i"
      class="x-card"
    >
      <xone-x
        v-for="(vv,ii) in getXMeta('xfields')"
        :key="ii"
        :xid="xid"
        :xmetapath="`${xmetapath}.xfields.${ii}`"
        :xdatapath="`${xdatapath}.list.${i}`"
      />
    </view>
  </view>



  <!-- --------- -->
  <!-- CRUD -->
  <!-- --------- -->

  <!-- header -->
  <view
    v-else-if="xcode==='header'"
    class="t-bg-white t-pad-base t-mar-bottom-base flex-items flex-sp-between"
  >
    <view class="t-fs-lg t-fw-lg flex-1">
      {{ getXMeta('xtitle', {defaultValue: $x.utils.getTitle()}) }}
    </view>
    <view class="flex-items">
      <template v-for="(v,i) in getXMeta('btns')">
        <el-button
          v-if="getXMeta('xif', {xbase: v})!==false"
          :key="i"
          :type="v.type"
          :size="v.size||'medium'"
          @click="xonClickByItem('', v)"
        >
          {{ v.xtitle }}
        </el-button>
      </template>
      <xone-x
        v-for="(v ,i) in getXChildrenMetas()"
        :key="i"
        :xid="xid"
        :xmetapath="getXChildMetaPath(i)"
        :xdatapath="getXMeta('xdatapath', {defaultValue: xdatapath, xbase: v})"
      />
    </view>
  </view>

  <!-- Query  -->
  <view 
    v-else-if="xcode==='querys'"
    class="flex-display flex-sp-between"
  >
    <view class="flex-1">
      <el-row 
        v-for="(v,i) in queryGetList()" 
        :key="i"
      >
        <el-col 
          v-for="(vv,ii) in v"
          :key="ii"
          class="t-pad-right-sm"
          :span="(vv.xspan||2)*2"
        >
          <el-select 
            v-if="vv.xtype==='select'"
            class="w-100"
            :placeholder="vv.placeholder||'请选择'"
            size="medium"
            :multiple="vv.xmultiple"
            clearable
            :value="getXData(vv.xfield)"
            @input="xonChange($event, vv.xfield)"
          >
            <el-option
              v-for="item in getXMeta('xoptions', {xbase: vv, defaultValue: []})"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-else-if="vv.xtype==='date'"
            class="w-100"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 00:00:00"
            :placeholder="vv.placeholder||'请选择'"
            size="medium"
            :value="getXData(vv.xfield)"
            @input="xonChange($event, vv.xfield)"
          />
          <el-date-picker
            v-else-if="vv.xtype==='daterange'"
            style="width: 100%"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 00:00:00"
            :start-placeholder="vv.placeholder||'开始日期'"
            :end-placeholder="vv.placeholder1||'结束日期'"
            size="medium"
            :value="[getXData(vv.xfield)||'',getXData(vv.xfield1)||'']"
            @input="xonChange($event[0], vv.xfield);xonChange($event[1], vv.xfield1)"
          />
          <el-button 
            v-else-if="vv.xtype==='submit'"
            :type="vv.type"
            size="medium"
            @click="xonClickByItem('', vv)"
          >
            {{ vv.xtitle||'搜索' }}
          </el-button>
          <el-input 
            v-else
            class="w-100"
            :value="getXData(vv.xfield)"
            :placeholder="vv.placeholder||'请输入内容'"
            size="medium"
            @input="xonChange($event, vv.xfield)"
          />
        </el-col>
      </el-row>
    </view>
    <view class="flex-items">
      <el-button
        v-for="(v,i) in getXMeta('btns')"
        :key="i"
        :type="v.type"
        :size="v.size||'medium'"
        @click="xonClickByItem('', v)"
      >
        {{ v.xtitle }}
      </el-button>
      <xone-x
        v-for="(v ,i) in getXChildrenMetas()"
        :key="i"
        :xid="xid"
        :xmetapath="getXChildMetaPath(i)"
        :xdatapath="getXMeta('xdatapath', {defaultValue: xdatapath, xbase: v})"
      />
    </view>
  </view>

  <!-- web detail -->
  <view v-else-if="xcode==='details'">
    <el-descriptions 
      :column="getXMeta('column', {defaultValue: 3})" 
      border
    >
      <template v-for="(v,i) in getXMeta('xfields', {defaultValue: []})">
        <el-descriptions-item 
          :key="i"
          :span="getXMeta('xspan', {xbase: v, defaultValue: 1})"
        >
          <template slot="label">
            <i
              v-if="getXMeta('icon', {xbase: v})"
              :class="'el-icon-'+getXMeta('icon', {xbase: v})"
            />
            {{ getXMeta('xtitle', {xbase: v}) }}
          </template>
          <template v-if="getHost()._xcrudGetEditing()&&getXMeta('readonlay', {xbase: v})!==true">
            <el-input 
              v-if="v.xtype==='input'"
              class="w-100"
              :placeholder="v.placeholder||'请输入内容'"
              :value="getXData(v.xfield)"
              @input="xonChange($event, v.xfield)"
            />
            <el-input 
              v-else-if="v.xtype==='number'"
              class="w-100"
              type="number"
              :placeholder="v.placeholder||'请输入内容'"
              :value="getXData(v.xfield)"
              @input="xonChange($event, v.xfield)"
            />
            <el-button 
              v-else-if="v.xtype==='location'"
              type="text"
              @click="controllToLocation(v)"
            >
              {{ controllGetLocation(v) }}(点击编辑)
            </el-button>
            <el-select 
              v-else-if="v.xtype==='select'"
              class="w-100"
              :placeholder="v.placeholder||'请选择'"
              :multiple="v.xmultiple"
              clearable
              :value="getXData(v.xfield)"
              @input="xonChange($event, v.xfield)"
            >
              <el-option
                v-for="item in getXMeta('xoptions', {xbase: v, defaultValue: []})"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-date-picker
              v-else-if="v.xtype==='date'"
              style="width: 100%"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd 00:00:00"
              :placeholder="v.placeholder||'请选择'"
              :value="getXData(v.xfield)"
              @input="xonChange($event, v.xfield)"
            />
            <el-date-picker
              v-else-if="v.xtype==='daterange'"
              v-model="value1"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd 00:00:00"
              :start-placeholder="v.placeholder||'开始日期'"
              :end-placeholder="v.placeholder1||'结束日期'"
              :value="getXData(v.xfield)"
              @input="xonChange($event, v.xfield)"
            />
            <text v-else>
              {{ getXData(v.xfield) }}
            </text>
          </template>
          <template v-else>
            <template v-if="v.xtype==='select'">
              {{ controllGetSelectValue(getXData(v.xfield), getXMeta('xoptions', {xbase: v, defaultValue: []}), v.xmultiple) }}
            </template>
            <text v-else>
              {{ getXData(v.xfield) }}
            </text>
          </template>
        </el-descriptions-item>
      </template>
    </el-descriptions>
  </view>

  <!-- table -->
  <el-table
    v-else-if="xcode==='table'"
    :data="getXData()"
    class="w-100"
  >
    <template v-for="(v,i) in getXMeta('xfields', {defaultValue: []})">
      <el-table-column
        v-if="v.type==='custom'"
        :key="i"
        :label="v.xtitle"
        :prop="v.xfield"
        :column-key="v.xfield"
        :width="v.width"
      >
        <xone-x
          v-for="(vv ,ii) in getXMeta('xcomponents', {xbase: v})"
          :key="ii"
          :xid="xid"
          :xmetapath="`${xmetapath}.xfields.${i}.xcomponents.${ii}`"
          :xdatapath="`${xdatapath}.${scope.$index}`"
        />
      </el-table-column>
      <el-table-column
        v-else-if="v.type==='operation'"
        :key="i"
        :label="v.xtitle"
        :prop="v.xfield"
        :column-key="v.xfield"
        :width="v.width"
      >
        <template 
          v-if="v.type==='operation'"
          slot-scope="scope"
        >
          <el-button 
            v-for="(vv ,ii) in v.btns"
            :key="ii"
            type="text"
            @click="xonClickByItem('', vv, scope.row)"
          >
            {{ vv.xtitle }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        :key="i"
        :label="v.xtitle"
        :prop="v.xfield"
        :column-key="v.xfield"
        :width="v.width"
      >
        <template slot-scope="scope">
          <template v-if="v.xshow">
            {{ v.xshow(this, scope.row) }}
          </template>
          <template v-else-if="v.xtype==='select'">
            {{ controllGetSelectValue(scope.row[v.xfield], getXMeta('xoptions', {xbase: v}), v.xmultiple)||'-' }}
          </template>
          <template v-else>
            {{ scope.row[v.xfield]||'-' }}
          </template>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <el-pagination
    v-else-if="xcode==='pagination'"
    class="t-mar-top-base text-align-right"
    layout="prev, pager, next"
    :current-page="Number(getXData(getXMeta('xfield'), {defaultValue: 1}))"
    :total="Number(getXData(getXMeta('xfield1'), {defaultValue: 1}))"
    :page-size="Number(getXData(getXMeta('xfield2'), {defaultValue: 10}))"
    @current-change="xonClick('Current', $event)"
  />

  <!-- chart -->
  <view 
    v-else-if="xcode==='chart'"
    class="t-bg-white t-border-radius-base"
    :class="[getXMeta('xclass')]"
    :style="[getXMeta('xstyle')]"
  >
    <view
      class="t-fs-lg t-mar-left-lg"
      style="line-height:2"
    >
      {{ getXMeta('xtitle') }}
    </view>
    <view 
      class="flex-items"
      :style="{height: getXMeta('height', {defaultValue: 400})+'rpx'}"
    >
      <view 
        v-if="getXMeta('type')==='value'"
        class="flex-items"
      >
        <i
          class="t-color-primary"
          :class="getXMeta('icon', {defaultValue: 'el-icon-odometer'})"
          style="font-size: 4em; margin: 0 0.5em"
        />
        <view>
          <view class="t-color-base">
            {{ getXMeta('subTitle') }}
          </view>
          <view>
            <text
              class="t-fw-lg"
              style="font-size: 2em"
            >
              {{ getXData(getXMeta('xfield')) }}
            </text> 
            <text class="t-color-base">
              {{ getXMeta('unit') }}
            </text>
          </view>
        </view>
      </view>
      <qiun-data-charts
        v-else
        :type="getXMeta('type', {defaultValue:'column'})"
        :chart-data="getXData(getXMeta('xfield'))||{}"
        :opts="getXMeta('options')||{}"
        background="none"
      />
    </view>
  </view>

  <!-- --------- -->
  <!-- none -->
  <!-- --------- -->
  <view v-else>
    error: no xcode {{ xmetapath }} - {{ xcode }} - {{ getXMeta() }}
  </view>
</template>

<script>
  import xbase from './lowcode/component/xbase'
  import xcomponent from './lowcode/component/xcomponent'
  import xcontroll from './lowcode/component/xcontroll'
  import x from './lowcode/component/x'

  import xcontrol from './lowcode/x/control'
  import xchart from './lowcode/x/chart'
  import xlayout from './lowcode/x/layout'
  import xquery from './lowcode/x/query'

  export default {
    mixins: [
      xbase, xcomponent, xcontroll, x, 
      xcontrol, xchart, xlayout, xquery
    ],
  }
</script>

<style lang="scss" scoped>
@import "./lowcode/style/card.scss";
@import "./lowcode/style/icon.scss";
@import "./lowcode/style/layout.scss";
@import "./lowcode/style/button.scss";
</style>
